<template>
    <div class="main">
        <div class="up">
            <div class="dropdown">
                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    诗人列表
                </a>
                <ul class="dropdown-menu">
                    <li @click="selectAuthor('杜甫')">杜甫</li>
                    <li @click="selectAuthor('李白')">李白</li>
                    <li @click="selectAuthor('王维')">王维</li>
                    <li @click="selectAuthor('李商隐')">李商隐</li>
                    <li @click="selectAuthor('孟浩然')">孟浩然</li>
                    <li @click="selectAuthor('韦应物')">韦应物</li>
                    <li @click="selectAuthor('刘长卿')">刘长卿</li>
                    <li @click="selectAuthor('杜牧')">杜牧</li>
                    <li @click="selectAuthor('王昌龄')">王昌龄</li>
                    <li @click="selectAuthor('李颀')">李颀</li>
                </ul>
            </div>
            <v-chart :option="bing" autoresize/>
        </div>
        <div class="down">
            <div class="input-group">
                <div class="s_up">
                    <input class="form-control" aria-label="作者" @keyup="pom" v-model="author"></input>
                </div>
                <div class="s_down">
                    <div class="title">
                        {{ show_pom }}
                    </div>
                    <textarea class="content" resize="none">{{ show_content }}</textarea>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import { color } from 'echarts';
import { onMounted, ref } from 'vue';

export default{
    setup(){
        let aothor_list=ref(null)
        let bing=ref({})
        async function getdata() {
            try{
                const content=await axios.get("http://127.0.0.1:8000/author_pom_type/")
                aothor_list.value=content.data
                aothor_list.value=aothor_list.value['作者唐诗类别数量']
                selectAuthor('李白'); // 默认加载李白数据 
            }catch(error){
                console.error("请求失败")
            }
        }
        getdata()
        let name=ref(null)
        let selectAuthor=(authorname)=>{
            // console.log(aothor_list.value)
            name.value=authorname
            let tmp=aothor_list.value[name.value]
            updatechart(tmp)
        }
       
        
        const updatechart=(data)=>{
            const pieData = Object.keys(data).map(category => ({
                name: category,
                value: data[category]
            }));

            bing.value = {
                title: {
                    text: '唐诗类别占比',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#333'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
    
                series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: pieData.sort(function (a, b) {
                        return a.value - b.value;
                    }),
                    roseType: 'radius',
                    label: {
                        color: 'rgba(255, 255, 255, 0.8)'
                    },
                    labelLine: {
                        lineStyle: {
                        color: 'rgba(255, 255, 255, 0.8)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    },
                    itemStyle: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                } ] };
        }
        let receive=ref(null)
        async function getdata1() {
            try{
                const content=await axios.get("http://127.0.0.1:8000/pom/")
                receive.value=content.data
                receive.value=receive.value["content"]
                // // 默认加载李白诗词 
                // if (receive.value["李白"]) {
                //     startInterval(receive.value["李白"]); // 启动轮播 
                // }
            }catch(error){
                console.error("请求失败")
            }
        }
        getdata1()
        const author=ref('')
        const show_pom=ref('')
        const show_content=ref('')
        const currentIndex = ref(0); // 当前显示的 item 索引 
        let intervalId = null; // 定时器 ID 
        
        // 更新 show_pom 内容的函数 
        const updateShowPom = (items) => {
            if (items.length  > 0) {
                const data=items[currentIndex.value]
                const key = Object.keys(data)[0]; 
                const value=Object.values(data)[0];
                show_pom.value  = key; // 更新 show_pom 
                show_content.value=value.trim();
                currentIndex.value  = (currentIndex.value  + 1) % items.length;  // 更新索引 
            }
        };
        
        // 启动定时器 
        const startInterval = (items) => {
            if (intervalId) clearInterval(intervalId); // 清除已有定时器 
            intervalId = setInterval(() => {
                updateShowPom(items);
            }, 3000); // 每隔 5 秒更新一次 
        };
        const pom=(event)=>{
            if(event.key==="Enter"){
                
                if (receive.value  && author.value)  {
                    const key = Object.keys(receive.value).find(k  => k.trim()  === author.value.trim()); 
                    if (key) {
                        let tmp = receive.value[key]; 
                        if (tmp.length  > 0) {
                            updateShowPom(tmp); // 立即显示第一个 item 
                            startInterval(tmp); // 启动定时器 
                        } else {
                            console.error(` 作者 "${author.value}"  的数据为空`);
                        }
                    } else {
                        console.error(` 作者 "${author.value}"  数据不存在`);
                    }
                } else {
                    console.error(" 数据未初始化或作者未输入");
                }
                
            }
        }
        return{
            bing,
            selectAuthor,
            pom,
            author,
            show_pom,
            show_content
        }
    }
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.up{
    flex-grow: 1;
    max-height: 325.13px;
    /* background-color: aqua; */
}
.down{
    max-height: 325.13px;
    flex-grow: 1;
    background-color: rgb(199, 209, 213);
}
.btn-secondary {
    background: linear-gradient(to left, #9c373700, rgba(205, 11, 11, 0.6)); /* 从完全透明到60%不透明 */
    border-color: #f8f9fa; /* 保持边框颜色一致 */
    color: #333; /* 文字颜色调整为深色 */
}
.input-group{
    /* background-color: #bc332c; */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.s_up{
    margin: 0px;
    padding: 0px;
    flex-grow: 1;
}
.s_down{
    margin: 0px;
    padding: 0px;
    flex-grow: 100;
    /* background-color: #a1453e; */
    display: flex;
    flex-direction: column;
}
.form-control{
    /* background-color: #bc332c; */
    background: linear-gradient(to right, rgba(87, 31, 31, 0), rgba(205, 11, 11, 0.6)); /* 从完全透明到60%不透明 */
}
.gushi{
    display: flex;
    /* background-color: rgb(206, 125, 32); */
    background: linear-gradient(to right, rgba(78, 30, 30, 0), rgba(150, 25, 25, 0.6)); /* 从完全透明到60%不透明 */
}
.title{
    font-size: larger;
    flex-grow: 1;
    top: 20px;
    /* background-color: #bc332c; */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 文本水平居中（备用） */
    background: linear-gradient(to right, rgba(81, 25, 25, 0), rgba(205, 11, 11, 0.6)); /* 从完全透明到60%不透明 */
}
.content{
    /* background-color: #bc332c; */
    font-size: larger;
    flex-grow: 6;
    /* background-color: aqua; */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(205, 11, 11, 0.6)); /* 从完全透明到60%不透明 */
}

</style>